Artyku│ z kursu HTML i CSS

Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przyk│adami

autor: Dariusz Majgier • ostatnia aktualizacja kursu: 2003.06.01

[Start] • [Elementy HTML] • [Atrybuty HTML] • [Style CSS] • [Porady online]
[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [t│a] • [synteza] • [druk]

Do│▒czanie i korzystanie ze styl≤w CSS

Style pozwalaj▒ kontrolowaµ wiΩkszo╢µ w│a╢ciwo╢ci element≤w HTML, kt≤re kiedy╢ mo┐na by│o ustawiaµ wy│▒cznie za pomoc▒ atrybut≤w. Powtarzanie atrybut≤w w wielu elementach by│o nie tylko niewygodne, ale zwykle jakakolwiek zmiana koloru lub wygl▒du strony wymaga│a dokonania poprawek na wszystkich stronach WWW, w ka┐dym elemencie.

Gdy nagle tytu│y mia│y byµ zielone i pogrubione, a dotychczas by│y czerwone i rozstrzelone, wtedy webmastera czeka│a bardzo niemi│a robota - musia│ rΩcznie zmieniaµ wygl▒d wszystkich tytu│≤w.

Organizacja W3C szybko dosz│a do wniosku, ┐e trzeba oddzieliµ uk│ad (konstrukcjΩ) strony od w│a╢ciwo╢ci element≤w umieszczonych na niej. Za pomoc▒ jΩzyka HTML tworzy siΩ wiΩc strukturΩ, jak np. tabele, tytu│y czy akapity, a korzystaj▒c ze styl≤w nadaje siΩ im odpowiednie w│a╢ciwo╢ci i formatowanie, np. kolor, pogrubienie, pochylenie, t│a, wielko╢µ liter i inne elementy odpowiedzialne za kszta│t i wygl▒d.

Wystarczy wiΩc przypisaµ do tytu│u strony nazwΩ stylu, np. "glowny" i zdefiniowaµ w jednym miejscu jakie w│a╢ciwo╢ci ma mieµ g│≤wny tytu│. Mo┐e byµ pogrubiony, niebieski, napisany czcionk▒ Arial o wielko╢ci 16 pikseli. Wszystkie tytu│y g│≤wne mog▒ mieµ ten sam styl zapisany w jednym pliku.

Gdy nagle trzeba zmieniµ wygl▒d tytu│≤w, wystarczy w jednym miejscu zmieniµ w│a╢ciwo╢ci stylu "glowny" i efekt bΩdzie widoczny od razu na wszystkich stronach we wszystkich tytu│ach oznaczonych tym stylem. Prawda, ┐e rewelacyjny (i rewolucyjny) wynalazek? Takie podej╢cie pozwala szybko zmieniµ kolorystykΩ, kszta│t czy w│a╢ciwo╢ci okre╢lonego stylu przypisanego konkretnym elementom HTML.

Jak zdefiniowaµ swoje style?

W│asne style mo┐esz nazwaµ dowolnie, w spos≤b dla Ciebie czytelny. Mog▒ nazywaµ siΩ np. "naglowek", "akapitczerwony" lub "pogrubienie". Aby je stworzyµ musisz zadeklarowaµ je w osobnym pliku lub wprost na wybranej stronie WWW.

W nag│≤wku strony, w sekcji HEAD umie╢µ swoj▒ definicjΩ stylu pomiΩdzy tagami STYLE.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html><head>
  <style type="text/css"><!--
    
    h1,td {color: green;}
    .naglowek {color: red; font-size:16px;}
    .pogrubiony {font-weight: bold;}

  --></style>
  <meta http-equiv="content-type" 
    content="text/html; charset=iso-8859-2">
  <title>Tytu│ strony</title>
</head><body>

  Dalsza tre╢µ strony, gdzie bΩd▒ u┐ywane Twoje style...

</body></html>

W przyk│adzie zosta│ zdefiniowany jeden styl dla element≤w H1 i TD i dwa style o nazwach "naglowek" i "pogrubiony". Naj│atwiejsz▒ notacj▒ (bo style mo┐na definiowaµ na kilka sposob≤w) i chyba najczΩ╢ciej spotykan▒ jest przypisanie stylu do elementu HTML. Inn▒ popularn▒ notacj▒ jest kropka i nazwa stylu. Kropka okre╢la, ┐e styl jest selektorem klasy, czyli oznacza, ┐e klasa bΩdzie mia│a nadan▒ przez nas nazwΩ, kt≤r▒ mo┐na potem u┐yµ w definicji klasy dla elementu HTML.

Brzmi nieco zawile? Te┐ tak my╢le. Teori▒ siΩ nie przejmuj, wa┐niejsza jest praktyka. PamiΩtaj o kropce i za ni▒ umie╢µ nazwΩ stylu. NastΩpnie w nawiasach klamrowych musisz opisaµ jakie cechy bΩdzie mia│ stworzony przez Ciebie styl.

Wszystkie tytu│y H1 i kom≤rki tabeli TD bΩd▒ mia│y kolor zielony (color: green;) Nag│≤wek ma mieµ czerwony kolor (color: red;) i wielko╢µ 16 pikseli (font-size:16px;). Styl pogrubiony bΩdzie tylko pogrubiony (font-weight: bold;).

Dowolny element HTML, kt≤ry ma mieµ styl naglowek powinien mieµ atrybut class z nazw▒ naszego stylu (ale ju┐ bez kropki):

<p class=naglowek>Nag│≤wek strony</p>

Bez problemu mo┐esz ten styl przypisaµ kilka razy do r≤┐nych element≤w na stronie:

<p class=naglowek>Nag│≤wek strony</p>
<div class=naglowek>Inny nag│≤wek strony</div>
<a href="http://www.reporter.pl" class=naglowek>Du┐y link</a>

Kropka oznacza, ┐e wszystkie elementy na stronie (polecenia HTML), dla kt≤rych zdefiniujesz klasΩ "naglowek" bΩd▒ mia│y ten styl. Gdy przypiszesz styl do elementu HTML, tylko te elementy maj▒ okre╢lone w│a╢ciwo╢ci (tak zrobili╢my z kom≤rkami tabeli i tytu│ami H1)

Jak ju┐ wiesz, aby kawa│ek tekstu mia│ pogrubiony styl, wystarczy go zdefiniowaµ z kropk▒ na pocz▒tku:

.pogrubiony {font-weight: bold;}

Tak okre╢lony styl mo┐e siΩ odno╢ciµ do dowolnych element≤w HTML - mo┐esz pogrubiµ akapity, tabele, linki i generalnie wszystkie tagi jΩzyka HTML. Dodaj▒c przed kropk▒ nazwΩ elementu HTML, mo┐esz ograniczyµ dzia│anie tego stylu tylko do wybranych polece± jΩzyka HTML. Zastosujmy pogrubienie tylko w akapitach:

P.pogrubiony {font-weight: bold;}

I u┐yjmy go w praktyce:

<p class=pogrubiony>TYLKO TEN tekst zostanie pogrubiony</p>
<br class=pogrubiony>ten tekst nie zostanie pogrubiony</br>
<div class=pogrubiony>Ten tekst nie zostanie pogrubiony</div>
<a href="http://reporter.pl" class=pogrubiony>Link bez pogrubienia</a>

Takie zachowanie pozwala stworzyµ wiele styl≤w o nazwie "pogrubiony", ale ka┐dy bΩdzie odnosi│ siΩ tylko do okre╢lonego elementu jΩzyka HTML:

P.pogrubiony {font-weight: bold;}
BR.pogrubiony {font-weight: bold; color: red;}

úatwo zapamiΩtaµ, ┐e brak nazwy elementu przed kropk▒ dotyczy wszystkich tag≤w HTML, a wyszczeg≤lniona nazwa przed kropk▒ we w│asnej definicji stylu ogranicza dzia│anie stylu tylko do tego elementu jΩzyka HTML.

Jest jeszcze jeden zapis w│asnej definicji stylu, gdzie zamiast kropki stosuje siΩ znak #:

#zielony {color: green;}

Tym razem odwo│anie do stylu nie nastΩpuje przez podanie atrybutu class, ale przez identyfikator elementu, czyli atrybut id:

<p id=zielony>zielony akapit</p>

Wa┐n▒ rzecz▒ jest aby na jednej stronie nie by│o dw≤ch element≤w HTML (np. dw≤ch lub wiΩcej akapit≤w), kt≤re maj▒ tak▒ sam▒ nazwΩ ID. Identyfikator jest unikalny. Je┐eli chcesz stosowaµ wiΩcej identyfikator≤w musisz je np. ponumerowaµ:

#zielony1 {color: green;}
#zielony2 {color: green;}
#zielony3 {color: green;}

<p id=zielony1>zielony akapit</p>
<span id=zielony2>zielony akapit</span>
<p id=zielony3>zielony akapit</p>

Tutaj r≤wnie┐ mo┐na ograniczyµ zakres dzia│ania stylu dla wybranego elementu dodaj▒c jego nazwΩ przed definicj▒ stylu:

P#zielony {color: green;}

W praktyce zapis z identyfikatorami ID nie jest czΩsto stosowany, poniewa┐ z definicji ka┐dy element HTML musi mieµ inny identyfikator i tych styli by│oby bardzo du┐o. Natomiast styl zapisany w ten spos≤b ma zastosowanie w dynamicznym HTML, a wiΩc w powi▒zaniu z JavaScriptem i DOMem, gdzie odwo│ania do element≤w HTML mo┐liwe s▒ poprzez identyfikatory ID.

Zdecydowanie najczΩ╢ciej spotykany jest przyk│ad pierwszy, gdzie po kropce podajesz nazwΩ stylu, a w nawiasach okre╢lasz wszystkie style i parametry jakie maj▒ byµ przypisane do danej nazwy. Potem w elementach HTML wystarczy za pomoc▒ atrybutu class przypisaµ okre╢lon▒ nazwΩ stylu, aby go u┐yµ w dowolnym miejscu na stronie.

Do│▒czanie styl≤w

Jednym ze sposob≤w jest umieszczenie styl≤w wprost przy elemencie, kt≤rego dotyczy korzystaj▒c z atrybutu style. Mo┐na w ten spos≤b nadaµ konkretny styl wybranemu elementowi HTML, bez konieczno╢ci stosowania arkusza zewnΩtrznego lub wewnΩtrznego:

<p style="color:red; font-size:16px;">
dowolny akapit
</p>

Takie rozwi▒zanie jest stosowane wyj▒tkowo, gdy trzeba zmieniµ wygl▒d jednego elementu (lub kilku element≤w) na stronie lub nadpisaµ wygl▒d konkretnego elementu HTML, kt≤ry wcze╢niej zosta│ zadeklarowany w stylach zewnΩtrznych lub osadzonych na stronie.

Nie powinno siΩ stosowaµ styl≤w wprost w elementach HTML, poniewa┐ trudno je potem znale╝µ w kodzie strony i k│opotliwe jest ich poprawianie. Mimo chaosu, jaki mo┐e wprowadziµ taki zapis, jest on w praktyce dosyµ czΩsto stosowony z lenistwa, bo │atwiej dokonaµ zmiany stylu konkretnego elementu ni┐ wypisywaµ wszystkie style w zewnΩtrznym arkuszu i potem przypisywaµ ka┐dy ze styl≤w do poszczeg≤lnych element≤w.

Definicje styl≤w mo┐na umie╢ciµ wprost na konkretnej stronie WWW, w sekcji nag│≤wkowej strony, czyli pomiΩdzy tagami <head> i </head>, np. zaraz po okre╢leniu tytu│u dla strony:

<head>
  <meta http-equiv="content-type" 
  content="text/html; charset=iso-8859-2">
  <title>Tytu│ strony </title>
  <style type="text/css"><!--

  body, p { 
    font-family: Arial, sans-serif; 
    font-size: 14px;
  }
  a { text-decoration:none; }
  .menu:active {color:navy;}
  .menu:link {color:navy;}
  .menu:visited {color:navy;}
  .menu:hover {color:#3333cc;}

  --></style>
</head>

Style s▒ umieszczone wprost na konkretnej stronie WWW i nawet je┐eli kto╢ skopiuje stronΩ na dysk lokalny i nie bΩdzie mia│ po│▒czenia z Sieci▒, w dalszym ci▒gu style bΩd▒ w dokumencie zachowane.

To bardzo dobry spos≤b osadzania styl≤w w przypadku jΩzyk≤w skryptowych (np. PHP), poniewa┐ style mo┐na do│▒czyµ z jednego pliku za pomoc▒ dyrektywy include.

Nieco gorzej jest z wykorzystaniem tej metody w wypadku statycznych stron HTML, gdy┐ modyfikacja stylu wymaga zmodyfikowania zapisu na wszystkich stronach nale┐▒cych do witryny. Wtedy wygodniej skorzystaµ z metody do│▒czenia zewnΩtrznego arkusza z dowolnego miejsca w Sieci lub z wybranego katalogu na stronie WWW.

Zamiast osadzaµ style CSS na stronie mo┐na je do│▒czyµ z zewnΩtrznego pliku za pomoc▒ elementu link:

<head>
  <meta http-equiv="content-type" 
  content="text/html; charset=iso-8859-2">
  <title>Tytu│ strony </title>
  <link rel="stylesheet" type="text/css" href="/style.css">
</head>

Mo┐na te┐ podaµ pe│n▒ ╢cie┐kΩ do serwera i do│▒czaµ wiΩcej ni┐ jeden arkusz styl≤w:

<link rel="stylesheet" type="text/css" href="http://serwer1/style.css">
<link rel="stylesheet" type="text/css" href="http://serwer2/style.css">

Do│▒czany plik style.css powinien zawieraµ od razu definicje styl≤w, jak poni┐ej:

body, p { 
  font-family: Arial, sans-serif; 
  font-size: 14px;
}
a { text-decoration:none; }
input { width:200px; }

Ten spos≤b do│▒czania styl≤w jest bardzo wygodny, poniewa┐ w praktyce istnieje tylko jeden plik ze stylami, kt≤ry mo┐e byµ do│▒czany z dowolnej lokalizacji w Sieci. Modyfikacje wystarczy przeprowadzaµ tylko w jednym pliku. Jego wad▒ jest to, ┐e podczas zapisywania strony na dysk, style mog▒ zostaµ zgubione i bez dostΩpu do pliku ze stylami strona mo┐e prezentowaµ siΩ ma│o ciekawie.

Dopuszczalna jest r≤wnie┐ kombinacja zastosowania styl≤w z zewnΩtrznego pliku w stylach znajduj▒cych siΩ na stronie:

<style type="text/css"><!--

@import url(http://serwer.pl/katalog/style.css)
body, p { 
  font-family: Arial, sans-serif; 
  font-size: 14px;
}
a { text-decoration:none; }

--></style>

W tym celu mo┐na skorzystaµ z polecenia @import do│▒czaj▒cego do styl≤w na stronie dodatkowe style znajduj▒ce siΩ w pliku w dowolnym miejscu w Sieci. Style znajduj▒ce siΩ poni┐ej do│▒czanego stylu mog▒ rozszerzyµ style z pliku lub zast▒piµ je na konkretnej stronie.

Co jeszcze?

Szczerze m≤wi▒c, o stylach mo┐na napisaµ ca│kiem spor▒ ksi▒┐kΩ, a przedstawione powy┐ej podstawy maj▒ tylko zaznajomiµ CiΩ z tematyk▒ i pom≤c szybko zacz▒µ je stosowaµ na stronach. Nie przejmuj siΩ, je┐eli od razu nie zroumiesz o co w tym wszystkim chodzi. My╢le, ┐e ka┐dy pocz▒tkuj▒cy webmaster mia│ problemy ze zrozumieniem wszystkich zawi│o╢ci styl≤w CSS. Mam nadziejΩ, ┐e ten kr≤tki, ale tre╢ciwy wstΩp, nieco wyja╢ni│ Ci pos│ugiwanie siΩ stylami w praktyce.

• • •
Zobacz porady, skrypty, artyku│y i gotowe rozwi▒zania dla w│a╢cicieli stron WWW!